<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="x" class="shuai hhh ccc eee" title="祖国">
    我爱我的祖国
    <div>我爱我的家</div>
    <div id="y">我爱我的小孩</div>
    <div>我爱我的人民</div>
</div>
<form action="">
    <input type="text" name="xxx" value="1123">
    哈哈哈哈
    <button title="快快点我一下" type="button" id="cl">点一下</button>
</form>
<script>

    // document.getElementById('cl').onclick = function () {
    //     使用value来获取表单元素的值
    //     console.log(document.querySelector('input').value);
    //
    // };

    //nodeValue只针对文本节点有效
    // console.dir(document.querySelector('input').nextSibling.nodeValue);

    /**
     * DOM 中， 节点分为文本节点和元素节点
     */
    var x = document.getElementById('x');
    // 获取或者设置一个节点对象的属性值
    // console.dir(x.classList.remove('hhh'));
    // console.dir(x.classList.add('xxxvfdff'));
    // 检验是否包含某个class
    // console.dir(x.classList.contains('hhh33'));

    // x.removeAttribute('title')


    // console.log(x.getAttribute('class'));
    // console.log(x.getAttribute('title'));
    // x.setAttribute('title', '人民大团结万岁')


    // var cla = x.getAttribute('class');
    // var clss = cla.split(' ');
    // var newStr = '';
    // for (var i in clss){
    //     if (clss[i] != 'hhh'){
    //         newStr += clss[i] + " ";
    //     }
    // }
    // x.setAttribute('class', newStr)
    // console.log(newStr)





    // console.dir(x);
    // console.dir(x.hasChildNodes());


    // var y = document.getElementById('y');

    // 获取当前节点的前一个元素节点
    // console.log(y.previousElementSibling.previousElementSibling);
    // y.previousSibling

    //根据当前节点获取下一个节点
    // console.log(y.nextElementSibling)
    // y.nextElementSibling.style.color = 'red'

    //通过子节点获取父节点
    // console.dir(y.parentElement);

    // console.log(x.innerText);
    // console.log(x.innerHTML);


</script>

</body>
</html>